import { Input } from 'antd';
/**
 * title: No value, have onChange component
 * desc: As long as there is an onChange field in props, the onChange function will be fired when state changes
 *
 * title.zh-CN: 无 value，有 onChange 的组件
 * desc.zh-CN: 只要 props 中有 onChange 字段，则在 state 变化时，就会触发 onChange 函数
 */

import React, { useState } from 'react';
import useControllableValue from './index';

const ControllableComponent = (props: any) => {
    const [state, setState] = useControllableValue<number>(props);

    return <Input value={state} onChange={() => setState(state ? state + 1 : 0)} style={{ width: 300 }} />;
};

const Parent = () => {
    const [state, setState] = useState<number>(0);
    const increment = () => {
        setState((s) => s + 1);
    };

    const decrease = () => {
        setState((s) => s - 1);
    };

    return (
        <>
            <ControllableComponent value={state} onChange={setState} />
            <button type="button" onClick={increment} style={{ margin: '0 4px' }}>
                +
        </button>
            <button type="button" onClick={decrease}>
                -
        </button>
        </>
    );
};
export default Parent;
